<template>
  <div>
    <h1>
      {{ pageQuery }}
    </h1>

    <MPaginationA
        :value="pageQuery.page"
        :limit="pageQuery.limit"
        :total="pageQuery.total"
        @change="handlePageChange"
    />

  </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from "vue";

export default defineComponent({
  components: {

  },
  setup() {
    const pageQuery = reactive({
      page: 1,
      total: 100,
      limit: 10
    })

    const handlePageChange = (curPage, size) => {
      pageQuery.page = curPage;
      pageQuery.limit = size;

    }

    return {
      pageQuery,
      handlePageChange
    }
  }
})

</script>